<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    table{
        border:1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;

    }
    th,td{
        padding: 8px 16px;
        border:1px solid #e9e9e9;
        text-align: left;
    }
    th{
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>

                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in books" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.data}}</td>
                    <td>{{item.price|showPrice}}</td>
                    <td>
                        <button @click="decrement(index)" :disabled="item.count<=1">-</button>
                        {{item.count}}
                        <button @click="increment(index)">+</button>
                    </td>
                    <td>
                        <button @click="removemesg(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h2 v-if="books.length">总价格:{{show|showPrice}}</h2>
        <h2 v-else>购物车为空！</h2>
    </div>

    <script src="../../vue.js"></script>
    <script>
    const app=new Vue({
        el:"#app",
        data:{
            books:[{
                id:1,
                name:'《算法导论》',
                data:'2006-9',
                price:85.00,
                count:1
            },{
                id:2,
                name:'《UNIX编程艺术》',
                data:'2006-2',
                price:59.00,
                count:1
            },{
                id:3,
                name:'《算法珠玑》',
                data:'2008-10',
                price:39.00,
                count:1
            },{
                id:4,
                name:'《代码大全》',
                data:'2006-3',
                price:128.00,
                count:1
            },
            ]
        },
        filters:{
            showPrice(price){
                return '￥'+price.toFixed(2)
            }
        },
        methods:{
            decrement(index){
              
                this.books[index].count-=1;
            },
            increment(index){
                this.books[index].count+=1;
            },
            removemesg(index){
                this.books.splice(index,1)
            }
        },
        computed:{
            show(){
                let num=0
                for(let i=0;i<this.books.length;i++){
                    num+=this.books[i].price*this.books[i].count
                }
                return num 
            }
        }
    })
    </script>
</body>
</html>